<template>
	<view>
		<view class="goods-box">
			<view class="goods-list" :style="{ margin: `${showData.styleMargin}px` }">
				<view v-if="showData.goodsList && showData.goodsList.length && showData.goodsList[0].id"
					v-for="(item, index) in showData.goodsList" :key="index" class="goods-li"
					:style="{ padding: `${showData.stylePadding}px` }"
					:class="{ 'is-goods-cell2': showData.showType === '2', 'is-goods-cell3': showData.showType === '3' }">
					<view class="goods-li-box">
						<navigator hover-class="none" :url="'/pages/goods/goods-detail/index?id=' + item.id">
							<view class="goods-item" @tap="">
								<view class="goods-img-one"
									:style="{ backgroundImage: 'url(' + item.spuUrls[0] + ')' }">
								</view>
								<view class="goods-box-info">
									<view class="goods-info-title">
										{{ item.name }}
									</view>
									<view class="goods-info-desc" v-if="showData.showDesc">
										{{ item.subTitle }}
									</view>
									<view class="goods-info-price">
										<view class="price-info text-price" :class="'text-'+theme.themeColor">
											{{ item.lowPrice }}
										</view>
										<view class="goods-info-buy-btn">
											<text v-if="showData.buyBtnStyle === '1'" class="cuIcon-goods"
												:class="'text-'+theme.themeColor"></text>
											<text v-if="showData.buyBtnStyle === '2'" class="cuIcon-cart"
												:class="'text-'+theme.themeColor"></text>
											<button v-if="showData.buyBtnStyle === '3'" class="cu-btn sm"
												:class="'bg-'+theme.themeColor">{{ showData.buyBtnText }}</button>
										</view>
									</view>
								</view>
							</view>
						</navigator>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		props: {
			showData: {
				type: Object,
				default: () => {}
			},
		},
		data() {
			return {
				theme: getApp().globalData.theme, //主题
			}
		}
	}
</script>


<style scoped lang="scss">
	.goods-box {
		background-color: #fff;
		position: relative;
		padding: 5px 5px;

		.goods-list {
			display: flex;
			flex-wrap: wrap;

			.goods-li {
				width: 100%;

				&.is-goods-cell2 {
					width: 50%;
				}

				&.is-goods-cell3 {
					width: 33.33%;
				}

				.goods-li-box {
					padding: 10px 5px;

					.goods-item {
						position: relative;

						.goods-img-one {
							width: 100%;
							background-color: #ccc;
							background-repeat: no-repeat;
							background-size: cover;

							&::before {
								content: '';
								padding-top: 100%;
								float: left;
							}

							&::after {
								content: '';
								display: block;
								clear: both;
							}
						}

						.goods-box-info {
							margin-top: 3px;

							.goods-info-title {
								width: 100%;
								font-size: 12px;
								overflow: hidden;
								text-overflow: ellipsis;
								-o-text-overflow: ellipsis;
								-webkit-text-overflow: ellipsis;
								-moz-text-overflow: ellipsis;
								white-space: nowrap;
							}

							.goods-info-desc {
								width: 100%;
								font-size: 12px;
								overflow: hidden;
								text-overflow: ellipsis;
								-o-text-overflow: ellipsis;
								-webkit-text-overflow: ellipsis;
								-moz-text-overflow: ellipsis;
								white-space: nowrap;
								margin-top: 5px;
							}

							.goods-info-price {
								position: relative;
								margin-top: 10px;

								&.goods-cell-3 {
									padding-right: 20px;
								}

								.price-info {
									width: 100%;
									font-size: 15px;
									overflow: hidden;
									text-overflow: ellipsis;
									-o-text-overflow: ellipsis;
									-webkit-text-overflow: ellipsis;
									-moz-text-overflow: ellipsis;
									white-space: nowrap;
								}

								.goods-info-buy-btn {
									position: absolute;
									top: 0;
									right: 0;

									.el-button {
										line-height: 22px;
										height: 24px;
										padding: 0 7px;
									}
								}
							}
						}
					}
				}
			}
		}
	}
</style>
